<div ng-init="init();" class="kmi-layout-content mobile09-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'mobile09.title' | translate"></div>
    </div>
    <div class="kmi-layout-main-content system-info">
        <div class="kmi-row-fields" style="padding: 8px; border-bottom: 1px #cecece solid;">
            <div class="column-item">
                <label class="label" ng-bind="'mobile09.loading_time' | translate"></label>
                <label class="value" ng-bind="loading_time"></label>
                <div style = "flex: 1;"></div>
                <button class="kmi-button__mobile" ng-click="search();" style="flex: 0 0 60px;">
                    <label ng-bind="'mobile09.refresh' | translate"></label>
                    <div class="kmi-can-click"></div>
                </button>
            </div>
        </div>
        <div class="bar-chart-panel" kmi-scrollbar>
            <div class="bar-chart-content">
                <div class="bar-chart-item" ng-repeat-start="item in query_result | orderBy : 'QTY' : true track by $index" >
                    <div class="bar-label">
                        <label ng-bind="'#'+($index+1) + '. ' +  item.MATERIALNAME"></label>
                    </div>
                    <div class="bar-item">
                        <div class="graph" ng-style="getBarGraphStyle(item);"></div>
                        <div class="value" ng-bind="item.QTY + '(' + item.UNITNAME2 + ')'"></div>
                    </div>
                    <div class="kmi-can-click" ng-click="showItemDetail(item, $index);"></div>
                </div>
                <div class="kmi-list none-column-split" ng-style="item.style">
                    <div class="kmi-list__header" style="padding: 4px 8px;">
                        <div class="kmi-list__column head-controls" style="flex: 1;">
                            <div class="order" ng-hide="MONO_filter">
                                <i class="material-icons search" style="z-index:1;" ng-click="MONO_filter = true">search</i>
                                <label ng-bind="'mobile09.item_detail.list.column1' | translate"></label>
                            </div>
                            <div class="filter" ng-show="MONO_filter">
                                <input ng-model="MONO_filter_s">
                                <i class="material-icons clear" style="position: absolute;top: 2px;right: 0px;" ng-show="MONO_filter"
                                    ng-click="MONO_filter = false;MONO_filter_s=''">clear</i>
                            </div>
                        </div>
                        <div class="kmi-list__column head-controls" style="flex: 0 0 80px;">
                            <div class="order">
                                {{'mobile09.item_detail.list.column2' | translate}}
                                <i class="material-icons">{{QTY_oderBy?'&#xE5D8;':'&#xE5DB;'}}</i>
                                <div class="kmi-can-click" ng-click="QTY_oderBy = !QTY_oderBy"></div>
                            </div>
                        </div>
                        <div class="kmi-list__column" style="flex: 0 0 60px;" ng-bind="'mobile09.item_detail.list.column3'|translate"></div>
                    </div>
                    <div class="kmi-list__row-content">
                        <div class="kmi-list__row" ng-repeat="inneritem in item.itemDetail | filter : {'MONO': MONO_filter_s} | orderBy : 'QTY' : !QTY_oderBy track by $index" style="padding: 4px 8px; height: 42px;">
                            <div class="kmi-list__column" ng-bind="inneritem.MONO" style="flex: 1; white-space: normal;"></div>
                            <div class="kmi-list__column" ng-bind="inneritem.QTY" style="flex: 0 0 80px;"></div>
                            <div class="kmi-list__column" ng-bind="inneritem.UNITNAME2" style="flex: 0 0 60px;"></div>
                        </div>
                    </div>
                </div>
                <span ng-repeat-end/>
            </div>
        </div>
    </div>
</div>
